<template>
  <div id="appDetailPage">
    <a-card>
      <a-row style="margin-bottom: 16px">
        <a-col flex="auto" class="content-wrapper">
          <h2>{{ data.appName }}</h2>
          <p>应用描述：{{ data.appDesc }}</p>
          <p>应用类型：{{ APP_TYPE_MAP[data.appType] }}</p>
          <p>评分策略：{{ APP_SCORING_STRATEGY_MAP[data.scoringStrategy] }}</p>
          <p>
            <a-space>
              作者：
              <div
                  :style="{ display: 'flex', alignItems: 'center'}"
              >
                <a-avatar :size="24" :image-url="data.user?.userAvatar" :style="{ marginRight: '8px' }"></a-avatar>
                <a-typography-text>{{ data.user?.userName ?? "匿名用户" }}</a-typography-text>
              </div>
            </a-space>
          </p>
          <p>创建时间：{{ dayjs(data.createTime).format("YYYY年MM月DD日 HH:mm:ss") }}</p>
          <a-space size="medium">
            <a-button type="primary" :href="`/answer/do/${props.id}`">开始答题</a-button>
            <a-button @click="doShare">分享应用</a-button>
            <a-button v-if="isMy" :href="`/add/question/${id}/${data.appType}`">设置题目</a-button>
            <a-button v-if="isMy" :href="`/add/scoring_result/${id}`">设置评分</a-button>
            <a-button v-if="isMy" :href="`/add/app/${id}`">修改应用</a-button>
          </a-space>
        </a-col>
        <a-col flex="320px">
          <a-image width="100%" :src="data.appIcon"/>
        </a-col>
      </a-row>
    </a-card>
    <ShareModal :link="shareLink" title="应用分享" ref="shareModalRef"/>
  </div>
</template>

<script setup lang="ts">
import {computed, defineProps, ref, watchEffect, withDefaults} from "vue";
import {getAppVoByIdUsingGet} from "@/api/appController";
import message from "@arco-design/web-vue/es/message";
import API from "@/api";
import {useRouter} from "vue-router";
import {dayjs} from "@arco-design/web-vue/es/_utils/date";
import {useLoginUserStore} from "@/store/userStore";
import {APP_SCORING_STRATEGY_MAP, APP_TYPE_MAP} from "@/constant/app";
import ShareModal from "@/components/ShareModal.vue";

interface Props {
  id: string;
}

const props = withDefaults(defineProps<Props>(), {
  id: () => {
    return "";
  }
});

const data = ref<API.AppVO>({});

// 获取登录用户
const loginUserStore = useLoginUserStore();
let loginUserId = loginUserStore.loginUser?.id;
// 是否为本人创建的应用
const isMy = computed(() => {
  return loginUserId && loginUserId === data.value.userId;
});

/**
 * 加载数据
 */
const loadData = async () => {
  if (!props.id) {
    return;
  }
  const res = await getAppVoByIdUsingGet({
    id: props.id as any
  });
  if (res.data.code === 0 && res.data.data) {
    data.value = res.data.data;
  } else {
    message.error("获取数据失败，" + res.data.message);
  }
};

watchEffect(() => {
  loadData();
});

const shareModalRef = ref();

// 分享链接 无论本地还是线上都不会改变地址，部署系统前也不用修改
const shareLink = `${window.location.protocol}//${window.location.host}/app/detail/${props.id}`;

// 分享
const doShare = (e: Event) => {
  if (shareModalRef.value) {
    shareModalRef.value.openModal();
  }
  // 停止冒泡，防止跳转到详情页
  e.stopPropagation();
}
</script>

<style scoped>
#appDetailPage {
}

#appDetailPage .content-wrapper > * {
  margin-bottom: 24px;
}
</style>
